<!DOCTYPE html>
<html>
<head>
	<title>REGNING</title>
	
	
	<style>
		table {
			font-size:64px;	
			text-align: center;		
		}
		#button{ 	
			font-size:72px;
			font-weight: bold;
			font-style: italic;
			text-align: center;	
			color: black;
			height: 90px;	
			width: 70px;
			border-radius: 36px;
		}
		#operID1{ 	
			font-size:72px;
			font-weight: bold;
			text-align: center;	
			color: black;
			background: white;
			height: 90px;	
			width: 70px;
			border: 0;
		}
		#operID2{ 	
			font-size:72px;
			font-weight: bold;
			text-align: center;	
			color: black;
			height: 90px;	
			width: 70px;
			background: white;
			border: 0;
		}
		#operLikhet{ 	
			font-size:72px;
			font-weight: bold;
			text-align: center;	
			height: 90px;	
			width: 70px;
			background: red;
			color: white;
			border: 0;
		}

		#ny{ 	
			font-size:48px;
			font-weight: bold;
			font-style: italic;
			text-align: center;	
			color: black;
			height: 90px;	
			width: 200px;
			border-radius: 36px;
		}

	</style>	
</head>
<body>

	<table width="100%">

		<tr height="100px"><td></td></tr>
	
		<tr height="50px">
			<td colspan="1" width="15%">1</td>
			<td colspan="1" width="10%">2</td>
			<td colspan="1" width="10%">3</td>
			<td colspan="1" width="10%">4</td>
			<td colspan="1" width="10%">5</td>
			<td colspan="1" width="10%">6</td>
			<td colspan="1" width="10%">7</td>
			<td colspan="1" width="10%">8</td>
			<td colspan="1" width="15%">9</td>
		</tr>
		<tr height="100px"><td></td></tr>
		<tr>
			<td colspan="1" id="tegn1">.</td>
			<td colspan="1" id="tegn2">A</td>
			<td colspan="1" id="tegn3"><button id="operID1" type="button" onclick="op1()">?</button></td>
			<td colspan="1" id="tegn4">B</td>
			<td colspan="1" id="tegn5"><button id="operLikhet" type="button">≠</button></td>
			<td colspan="1" id="tegn6">C</td>
			<td colspan="1" id="tegn7"><button id="operID2" type="button" onclick="op2()">?</button></td>
			<td colspan="1" id="tegn8">D</td>
			<td colspan="1" id="tegn9">.</td>
		</tr>
		<tr height="100px"><td></td></tr>
		<tr>
			<td colspan="9"><button id="ny" type="button" onclick="ny()">NY</button></td>
		</tr>	
	
	</table>
 
</body>

<script>

	var operand1 = 0;
	var operand2 = 0;
	var operArr = [5];
	var oppgave = [6];
	
	operArr[0]="?"; operArr[1]="+"; operArr[2]="−"; operArr[3]="×"; operArr[4]="/"; operArr[5]="≠"; operArr[6]="="; 
	
	oppgave[1]=12;	// 12
	oppgave[2]=4;	// /
	oppgave[3]=4;	// 4
	oppgave[4]=17;	// 17
	oppgave[5]=2;	// -
	oppgave[6]=14;	// 14
	
	function ny() {
		document.getElementById('tegn2').innerText = oppgave[1];
		operand1=0; document.getElementById('operID1').innerText = operArr[operand1];
		document.getElementById('tegn4').innerText = oppgave[3];
		//document.getElementById('tegn5').innerText = operArr[5];
		document.getElementById('operLikhet').innerText = operArr[5];
		document.getElementById('tegn6').innerText = oppgave[4];
		operand2=0; document.getElementById('operID2').innerText = operArr[operand2];
		document.getElementById('tegn8').innerText = oppgave[6];
	}

	function op1() {
		operand1=operand1+1;
		if(operand1 > 4) { operand1=1 }
		document.getElementById('operID1').innerText = operArr[operand1];
		
		if(operand1==oppgave[2] && operand2==oppgave[5]) {
			document.getElementById("operLikhet").style.background="white";
			document.getElementById("operLikhet").style.color="black";
			document.getElementById('operLikhet').innerText = operArr[6];
		} else {
			document.getElementById("operLikhet").style.background="red";
			document.getElementById("operLikhet").style.color="white";
			document.getElementById('operLikhet').innerText = operArr[5];		
		}				
	}
	
	function op2() {
		operand2=operand2+1;
		if(operand2 > 4) { operand2=1 }
		document.getElementById('operID2').innerText = operArr[operand2];
		
		if(operand1==oppgave[2] && operand2==oppgave[5]) {
			document.getElementById("operLikhet").style.background="white";
			document.getElementById("operLikhet").style.color="black";
			document.getElementById('operLikhet').innerText = operArr[6];
		} else {
			document.getElementById("operLikhet").style.background="red";
			document.getElementById("operLikhet").style.color="white";
			document.getElementById('operLikhet').innerText = operArr[5];		
		}
	}

</script>
</ html>